<template>
  <el-color-picker v-bind="defaultAttr" v-model="modelValue" @change="handleChange" />
</template>

<script setup>
// v-model值
const modelValue = defineModel()

// 输入框配置项
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
  mode: {
    // 'edit' | 'detail' | 'add'
    type: String,
    default: 'detail',
  },
})

const defaultAttr = computed(() => {
  // 设置默认绑定值
  let { attrs = {} } = props.config
  // 获取默认项
  attrs['placeholder'] = attrs?.placeholder || `请输入${props.config.label}`

  // 判断禁用
  attrs['disabled'] = props.mode === 'detail' ? true : props.config?.disabled || false
  return { ...attrs }
})

// 事件
const emits = defineEmits(['change'])
const handleChange = (value) => {
  if (props.config.event) {
    emits('change', value)
  }
}
</script>

<style lang="scss" scoped></style>
